<template>
<div id="post">
    <div>
        <b-navbar toggleable="lg" type="dark" variant="info" id="nav">
            <b-navbar-brand href="#">{{user.username}}</b-navbar-brand>

            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

            <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav>
                    <b-nav-item href="#">Link</b-nav-item>
                    <b-nav-item href="#" disabled>Disabled</b-nav-item>
                </b-navbar-nav>

                <!-- Right aligned nav items -->
                <b-navbar-nav class="ml-auto">

                    <b-form-input size="sm" class="mr-sm-2" placeholder="Search" @keyup.enter="test()"></b-form-input>

                    <b-nav-item-dropdown text="Lang" right>
                        <b-dropdown-item href="#">EN</b-dropdown-item>
                        <b-dropdown-item href="#">ES</b-dropdown-item>
                        <b-dropdown-item href="#">RU</b-dropdown-item>
                        <b-dropdown-item href="#">FA</b-dropdown-item>
                    </b-nav-item-dropdown>

                    <b-nav-item-dropdown right>
                        <!-- Using 'button-content' slot -->
                        <template v-slot:button-content>
                            <em>User</em>
                        </template>
                        <b-dropdown-item href="#">Profile</b-dropdown-item>
                        <b-dropdown-item href="#">Sign Out</b-dropdown-item>
                    </b-nav-item-dropdown>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>
    </div>

    <div class="container">
        <md-field>
            <label>Say Something</label>
            <md-textarea v-model="article" md-autogrow></md-textarea>
        </md-field>

        
        <md-progress-bar v-if="showProgress" md-mode="determinate" :md-value="progress"></md-progress-bar>
        <input type="file" @change="getImgUrl" accept="image/*" ref="imgSelect" style="display:none">
        <md-button class="md-raised md-primary" @click="$refs.imgSelect.click()">选择图片</md-button>
        <md-button class="md-raised md-primary" @click="post">发布</md-button>

        <b-row>
            
            <b-col>
                <b-img-lazy thumbnail v-bind="mainProps" :src="articleImg" v-if="!!articleImg" fluid alt="预览图片"></b-img-lazy>
            </b-col>
            <b-col></b-col>
            
        </b-row>
        

    </div>

    <div class="container all-posts">
        <div class="user" v-for="post in posts" :key="post.id">
            <div class="user-avatar">

                <img src="../assets/avatar.jpg" alt="">
            </div>
            <div class="post">
                <div class="username">{{post.user.username}}</div>

                <p>{{post.content}}</p>

                <div class="operation">

                    <div>
                        <button class="comment" @click="showCommentForm(post)">
                            <img src="../assets/comment.png" alt="">
                        </button>
                    </div>

                    <div>
                        <button class="like" @click="toggleImg(post)">
                            <img :src="getLikeImg(post)" alt="">
                        </button>
                    </div>

                </div>
                <div class="comments" v-for="comment in post.comments" :key="comment.id">
                    <div class="one-comment">
                        <hr>
                        <div class="comment-body" v-if="comment.to==me.id">
                            <div class="commenter">{{comment.from}}:</div>
                            <p class="comment-text">{{comment.content}}</p>
                        </div>

                        <div class="comment-body" v-else>
                            <div class="commenter">{{comment.from}}&emsp;回复&emsp;{{comment.to}}：</div>
                            <p class="comment-text">{{comment.content}}</p>
                        </div>

                    </div>
                </div>
                <div class="comment-form" v-show="post.commentFormVisibility">

                    <b-form-input placeholder="say something"></b-form-input>
                    <button>
                        <img src="../assets/send.png" alt="">
                    </button>
                </div>

            </div>

        </div>

    </div>
</div>
</template>

<script>
// @ is an alias to /src
import post from '../api/post'
export default {
    name: 'Posts',
    components: {

    },
    data() {
        return {
            
            mainProps: {
                center: true,
                fluidGrow: true,
                blank: true,
                blankColor: '#bbb',
                width: 'auto',
                height: 'auto',
                class: 'my-5'
            },
            progress: 0,
            showProgress: false,
            articleImg: '',
            article: '',
            user: {
                id: '123',
                username: 'wzq',
                avatar: '',
            },
            me: {
                id: '123',
                username: '',
                avatar: '',
            },
            posts: [{
                user: {
                    username: '吴泽群',
                    userAvatar: '',
                },
                content: 'To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.The function signature is:',
                commentFormVisibility: false,
                like: false,
                comments: [{
                    to: '123',
                    from: '456',
                    content: 'ssss'
                }, {
                    to: '789',
                    from: '456',
                    content: ' You can only specify the explicit or the implicit grid properties in a single grid declaration. '
                }, {
                    to: 'sss',
                    from: '456',
                    content: '吹面不寒杨柳风'
                }, ],
            }, {
                user: {
                    username: '吴泽群',
                    userAvatar: '',
                },
                content: 'To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.The function signature is:',
                commentFormVisibility: false,
                like: false,
                comments: [{
                    to: '123',
                    from: '456',
                    content: 'ssss'
                }, {
                    to: '789',
                    from: '456',
                    content: ' You can only specify the explicit or the implicit grid properties in a single grid declaration. '
                }, {
                    to: 'sss',
                    from: '456',
                    content: '吹面不寒杨柳风'
                }, ],
            }],

            likeImg: require('../assets/like-empty.png'),

        }
    },
    mounted() {
        let title = '';
        if (this.user.id === this.me.id)
            title = "个人中心";
        else
            title = `${this.user.username}的主页`;
        document.title = title;

    },
    computed: {
        current_user() {
            return this.$store.state.user;
        }

        // getLikeImg() {
        //     return function (post) {
        //         if (post.like)
        //             return require('../assets/like.png');
        //         else
        //             return require('../assets/like-empty.png');
        //     }
        // }
    },
    methods: {
        getImgUrl(e) {
            let file = e.target.files[0];
            if (!file)
                return;
            
            this.tools.getOrientation(file,(orientation)=>{
                window.console.log(orientation);
            })
            
            let reader = new FileReader();
            reader.readAsDataURL(file);
           
            reader.onloadstart = () => {
                
                this.showProgress = true;
            }
            reader.onprogress = (res) => {

                this.progress = (res.loaded / res.total).toFixed(2) * 100;

            }
            reader.onload = () => {
                this.showProgress = false;
                this.articleImg = reader.result.toString();
                this.progress = 0;
            }
        },
        post() {
            const newPost = {
                author: this.current_user.id,
                article: this.article
            };
            post.submitsPost(newPost).then(res => {
                window.console.log(res);
                this.posts.push(newPost);
                this.article = '';
            }).catch(err => {
                window.console.log(err.response)
            })
        },
        getLikeImg(post) {
            if (post.like)
                return require('../assets/like.png');
            else
                return require('../assets/like-empty.png');
        },
        showCommentForm(post) {
            post.commentFormVisibility = !post.commentFormVisibility;
        },
        toggleImg(post) {
            post.like = !post.like;
        },
        test() {
            this.user.username = 'sss';
        }
    }
}
</script>

<style lang="scss" scoped>
$font-family-sans-serif: // Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue",
Arial,
sans-serif,
// Emoji fonts
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol" !default;

#post {
    font-family: $font-family-sans-serif;
}

.user {
    margin-top: 2vh;
    display: flex;
    padding: 0.2rem;
    background: #409EFF;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

}

.user-avatar {
    margin: 0 1vh;
}

.user-avatar img {
    width: 6vh;
    min-width: 3rem;
    border-radius: 50%;
}

.post {
    .username {
        padding: 0.2rem 0 0 0.5rem;
        font-size: 1.2rem;
        color: rgba(0, 0, 0, .87);
        border-radius: 0.2rem;
    }

    // background: #409EFF;
    border-radius: 1vh;
    margin-right: 0.2rem;
}

.post p {
    padding: 0 0.5rem;
    margin-bottom: 0;

    color: white;
}

.operation {
    display: flex;
    flex-direction: row-reverse;

}

.operation button {
    border: none;
    background-color: transparent;
    margin: 0 3vh 1vh 0;

    img {
        width: 3vh;
        min-width: 1.2rem;
    }
}

button:focus {
    outline: #409EFF;
}

hr {
    margin: 0;
}

.comment-body {
    display: flex;

    border-radius: 0.2rem;

    .commenter {
        color: rgba(0, 0, 0, .87);
        padding: 0.2rem 0 0 0.5rem;
        font-size: 0.8rem;
    }
}

.comment-form {
    padding: 1vh;
    display: flex;
    width: 100%;
    background: #409EFF;

    button {
        display: flex;
        align-items: center;
        justify-content: center;

        border: none;
        background: transparent;
        margin-left: 1vh;

        img {
            width: 3vh;
            min-width: 1.2rem;
        }
    }
}
</style>
